<template>
  <div class="container">
    <van-cell-group>
      <single-picker
        label="民族"
        :value="formData.nation"
        :data="options.nations"
        placeholder="请选择民族"
        @change="onCheckedNation"
        required
        :border="false"
      >
      </single-picker>
      <single-picker
        label="血型"
        :value="formData.nation"
        :data="options.bloodtypes"
        placeholder="请选择血型"
        @change="onCheckedBlood"
        required
        :border="false"
      >
      </single-picker>
      <date-picker
        label="出生日期"
        :start="formatAgeDate(age.max)"
        :end="formatAgeDate(age.min)"
        :value="formData.birthday"
        placeholder="请选择出生日期"
        @change="onChecked"
        required
        :border="false"
      >
      </date-picker>
      <van-field
        :value="formData.country"
        label="性别"
        placeholder="请选择性别"
        required
        :border="false"
      />
    </van-cell-group>
    <van-button
      type="primary"
      size="large"
      @click="onSubmit"
    >获取值</van-button>

    <pre>{{formData}}</pre>
  </div>
</template>

<script>
// import Vue from 'vue'
import dist from '@/utils/countries'
import options from '@/utils/options'
import { formatDate } from '@/utils/index'
import DatePicker from '@/components/form/datePicker'
import SinglePicker from '@/components/form/singlePicker'
export default {
  components: {
    DatePicker,
    SinglePicker
  },

  data () {
    return {
      current: '',
      formData: {
        country: '',
        nation: '',
        bloodtype: '',
        birthday: ''
      },
      age: {
        min: 16,
        max: 65
      },
      options: options,
      multiArray: dist
    }
  },
  onLoad (option) {
    // let continent = Object.keys(dist)
    // this.multiArray.push(continent)
    // this.multiArray.push(dist[continent[0]])
  },
  created () {
    console.log('test')
  },

  methods: {
    formatAgeDate (age) {
      let now = new Date()
      let year = now.getFullYear() - age
      now.setFullYear(year)
      let date = formatDate(now)
      return date
    },
    onSubmit () {
      console.log(this.formData)
    },
    onChecked (data) {
      this.formData.birthday = data
    },
    onCheckedNation (data) {
      console.log('选择的民族', data)
      this.formData.nation = data
    },
    onCheckedBlood (data) {
      console.log('选择的血型', data)
      this.formData.bloodtype = data
    }
  }
}
</script>

